<template>
  <div style="background: #f7f8fa">
    <div class="typeface" style="margin-left: 15%; margin-top: 20px">
      <div style="height: 20px">
        <span>创建直播间</span>
      </div>
    </div>

    <div class="box-shadow" style="background-color: white; border-radius: 6px">
      <div style="height: 10px"></div>
      <div class="steps">
        <el-steps :space="200" :active="1" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="直播间配置"></el-step>
        </el-steps>
      </div>

      <div v-if="active == 1">
        <div class="activeOne">
          <el-form ref="info" :model="info" :rules="rules" label-width="100px">
            <el-form-item label="直播标题" style="width: 500px" prop="name">
              <el-input
                v-model="info.name"
                @input="changeValue(info.name)"
              ></el-input>
            </el-form-item>

            <el-form-item label="开播时间" prop="endTime">
              <el-date-picker
                v-model="timeValue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期时间"
                end-placeholder="结束日期时间"
                @change="getSTime"
              >
              </el-date-picker>
              <el-tooltip class="item" effect="dark" content="开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后，开播时间和结束时间间隔不得短于30分钟，不得超过24小时" placement="top">
                <i class="el-icon-question" style="font-size: 16px;color: #333;margin-left: 10px;"></i>
              </el-tooltip>
            </el-form-item>
                <el-form-item
                  label="主播昵称"
                  style="width: 500px"
                  prop="anchorName"
                >
                  <el-input
                    v-model="info.anchorName"
                    @input="changeValues(info.anchorName)"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="主播微信号"
                  style="width: 500px"
                  prop="anchorWechat"
                >
                  <el-input v-model="info.anchorWechat"></el-input>
                </el-form-item>
          </el-form>
          <el-popover placement="bottom" width="200" trigger="hover">
            <img
              style="width: 100%; height: 100%"
              src="https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh"
            />
            <el-button style="margin-left: 100px" size="mini" slot="reference"
            >微信号实名扫码
            </el-button
            >
          </el-popover>
        </div>
        <div class="activeOneBtn">
          <el-button @click="cancel()">取消</el-button>
          <el-button
            style="background-color: #6467f0; color: #fff"
            @click="nextStep"
          >下一步
          </el-button
          >
        </div>
      </div>
      <div v-if="active == 2">
        <div style="width: 100%; margin-left: 15%; margin-top: 20px">
          <div class="itemImg">分享卡片样式配置</div>
          <div style="display: flex">
            <div class="configure">
              <img class="imgsrc" :src="imgsrc"/>
              <div
                style="
                  width: 255px;
                  height: 280px;
                  background: #fff;
                  padding: 10px 15px 0;
                "
              >
                <div>
                  <img class="headImg" :src="headImg"/>
                  <span class="headTitle">{{ nickName }}</span>
                </div>
                <div style="font-size: 16px; margin-bottom: 6px">
                  好友邀请你参与直播：
                </div>
                <div>
                  <img
                    v-if="imgform.imageurl != null"
                    class="configureImg"
                    :src="imgform.imageurl"
                  />
                  <div v-else class="configureImg"></div>
                </div>
                <div class="configureFoot">
                  <svg-icon
                    style="width: 15px; height: 15px"
                    icon-class="xiaochengxu"
                  />
                  <span
                    style="font-size: 12px; color: #00000080; margin-left: 3px"
                  >小程序</span
                  >
                </div>
              </div>
            </div>

            <div style="width: 375px; height: 216px; margin-left: 30px">
              <div style="color: #000000; font-size: 14px; font-weight: bold">
                分享卡片封面
              </div>
              <p style="font-size: 13px; color: #00000080; font-weight: 300">
                用户在微信对话框内分享的直播间将以分享卡片的形式呈现。
              </p>
              <p style="font-size: 13px; color: #00000080; font-weight: 300">
                建议尺寸：建议像素800*640，大小不超过1M。
              </p>
              <wechatImg
                :imageStr.sync="imgform.shareImg"
                :imageurl.sync="imgform.imageurl"
              ></wechatImg>
            </div>
          </div>
        </div>

        <div style="width: 100%; margin-left: 15%; margin-top: 20px">
          <div class="itemImg">官方收录样式</div>
          <div style="display: flex">
            <div class="configuretow">
              <div
                class="configuretowLeft"
                v-if="imgform.liveurl != null"
                :style="`background: url(${imgform.liveurl}) no-repeat;background-size: contain;`"
              >
                <div class="configuretowLeftImg">
                  <div class="configuretowtImg"></div>
                  <span>999观看</span>
                </div>
              </div>
              <div v-else class="configuretowLeft">
                <div class="configuretowLeftImg">
                  <div class="configuretowtImg"></div>
                  <span>999观看</span>
                </div>
              </div>
              <div class="configuretowRight">
                <div style="margin: 10px 0 0 10px">
                  <img class="headImg" :src="headImg"/>
                  <span class="headTitle">{{ nickName }}</span>
                </div>
                <p style="margin-left: 10px">{{ info.name }}</p>
              </div>
            </div>

            <div style="width: 375px; height: 216px; margin-left: 30px">
              <div style="color: #000000; font-size: 14px; font-weight: bold">
                直播卡片封面
              </div>
              <p style="font-size: 13px; color: #00000080; font-weight: 300">
                图片建议大小为 800像素 * 800像素。
              </p>
              <p style="font-size: 13px; color: #00000080; font-weight: 300">
                图片大小不超过 300KB。
              </p>
              <p style="font-size: 13px; color: #00000080; font-weight: 300">
                图片内容遵循平台规范后更容易被推荐。
              </p>
              <wechatImg
                :imageStr.sync="imgform.feedsImg"
                :imageurl.sync="imgform.liveurl"
              ></wechatImg>
            </div>
          </div>
        </div>

        <div style="width: 100%; margin-left: 15%; margin-top: 20px">
          <div class="itemImg">直播间样式配置</div>
          <div style="display: flex">
            <div class="configureThree">
              <div
                v-if="imgform.liveBGurl != null"
                style="width: 100%; height: 100%"
                :style="`background: url(${imgform.liveBGurl}) no-repeat;background-size: contain;`"
              >
                <div class="liveBG">
                  <div
                    style="position: absolute;top: 44px;left: 52px;z-index: 3;}"
                  >
                    <div class="liveBGHead">
                      <img :src="headImg" class="headImg"/>
                      <span>
                        <div
                          style="
                            font-size: 12px;
                            color: #fff;
                            font-weight: bold;
                          "
                        >
                          文嘟嘟
                        </div>
                        <div style="font-size: 12px; color: #fff">观看人数</div>
                      </span>
                      <div class="liveBGHeadBtn">立即订阅</div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="liveBG">
                <div
                  style="position: absolute;top: 44px;left: 52px;z-index: 3;}"
                >
                  <div class="liveBGHead">
                    <img :src="headImg" class="headImg"/>
                    <span>
                      <div
                        style="font-size: 12px; color: #fff; font-weight: bold"
                      >
                        文嘟嘟
                      </div>
                      <div style="font-size: 12px; color: #fff">观看人数</div>
                    </span>
                    <div class="liveBGHeadBtn">立即订阅</div>
                  </div>
                </div>
              </div>
            </div>

            <div style="width: 375px; height: 216px; margin-left: 30px">
              <div style="color: #000000; font-size: 14px; font-weight: bold">
                直播间背景墙
              </div>
              <p style="font-size: 13px; color: #00000080; font-weight: 300">
                直播间背景墙是每个直播间的默认背景。
              </p>
              <p style="font-size: 13px; color: #00000080; font-weight: 300">
                建议尺寸：600像素 * 1300像素，图片大小不得超过 3M
              </p>
              <wechatImg
                :imageStr.sync="imgform.coverImg"
                :imageurl.sync="imgform.liveBGurl"
              ></wechatImg>
            </div>
          </div>
        </div>
        <div class="bottomBtn">
          <el-button class="buttonOne" @click="nextStepTwo">上一步</el-button>
          <el-button v-if="$route.query.data" class="buttonTwo" @click="submits"
          >编辑
          </el-button
          >
          <el-button v-else class="buttonTwo" @click="submit">创建</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {updateWaChatImg} from "@/api/applet/broadcastGood";
  import {creatRoom, addSubjectInfo} from "@/api/applet/broadcast";
  import wechatImg from "@/components/ImageUpload/weChatBirectImg";
  import {getAuthorizerInfo} from "@/api/applet/authorization";

  export default {
    //import 引入的组件需要注入到对象中才能使用
    props: {
      indexStr: {
        type: Boolean,
        default: true,
      },
    },
    components: {wechatImg},
    data() {
      //这里存数据
      return {
        min: false,
        mins: false,
        timeValue: [],
        imgsrc:
          "https://res.wx.qq.com/mmbizwxalivenodelogicsvr_node/dist/images/wechat_img_15d068.png",
        active: 1,
        basic: true,
        configuration: false,
        info: {},
        query: {
          page: 1,
          pagelimit: 5,
        },
        // 表单校验
        rules: {
          name: [
            {
              required: true,
              message: "最短3个汉字，最长17个汉字，1个汉字相当于2个字符",
              trigger: "blur",
            },
            {
              min: 3,
              message: "最短3个汉字，最长17个汉字，1个汉字相当于2个字符",
            },
          ],
          endTime: [
            {required: true, message: "开播时间不能为空", trigger: "blur",}
          ],
          anchorName: [
            {
              required: true,
              message: "最短2个汉字，最长15个汉字，1个汉字相当于2个字符",
              trigger: "blur",
            },
            {
              min: 2,
              message: "最短2个汉字，最长15个汉字，1个汉字相当于2个字符",
            },
          ],
          anchorWechat: [
            {
              required: true,
              message: "主播微信号不能为空",
              trigger: "blur",
            },
          ],
        },
        imgform: {
          imageurl: null,
          shareImg: null,
          feedsImg: null,
          liveurl: null,
          coverImg: null,
          liveBGurl: null,
        },
        headImg: "",
        nickName: "",
      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    created() {
      this.getAuthorizerInfoData();
      if (this.$route.query.data) {
        this.resForm();
      }
    },
    //方法
    methods: {
      changeValue(attr) {
        //传入的属性
        let value = attr; //校验的字段
        // 中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算
        let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
        let maxLimitStr = 17; //17个汉字
        let pass = true;
        let substringStr = "";
        let length = 0;
        let strArr = value.split("");
        strArr.map((str) => {
          if (pass) {
            if (cnReg.test(str)) {
              //中文
              length++;
            } else {
              //英文
              length += 0.5;
            }
            //大于最大限制的时候

            if (length > maxLimitStr) {
              pass = false;
              // this.$notifyError(
              // "文字长度已超出最大值，最大值为" + maxLimitStr * 2 + "个字符",
              // );
              //将校验的字符截取返回
              this.info.name = substringStr;
            } else if (length < 3) {
              this.min = false;
            } else {
              this.min = true;
              substringStr += str;
            }
          }
        });
        return pass;
      },
      changeValues(attr) {
        //传入的属性
        let value = attr; //校验的字段
        // 中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算
        let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
        let maxLimitStr = 15; //15个汉字
        let pass = true;
        let substringStr = "";
        let length = 0;
        let strArr = value.split("");
        strArr.map((str) => {
          if (pass) {
            if (cnReg.test(str)) {
              //中文
              length++;
            } else {
              //英文
              length += 0.5;
            }
            //大于最大限制的时候
            if (length > maxLimitStr) {
              pass = false;
              // this.$notifyError(
              // "文字长度已超出最大值，最大值为" + maxLimitStr * 2 + "个字符",
              // );
              //将校验的字符截取返回
              this.info.anchorName = substringStr;
            } else if (length < 2) {
              this.mins = false;
            } else {
              this.mins = true;
              substringStr += str;
            }
          }
        });
        return pass;
      },

      resForm() {
        debugger
        this.info = this.$route.query.data;
        console.log(this.info);
        this.changeValue(this.info.name)
        this.changeValues(this.info.anchor_name)
        this.info.start_time = this.info.start_time * 1000;
        this.info.end_time = this.info.end_time * 1000;
        this.timeValue.push(this.info.start_time);
        this.timeValue.push(this.info.end_time);
        this.imgform.imageurl = this.info.shareImgStr;
        this.imgform.liveBGurl = this.info.coverImgStr;
        this.imgform.liveurl = this.info.feedsImgStr;
        this.imgform.shareImg = this.info.share_img
        this.imgform.feedsImg = this.info.feeds_img
        this.imgform.coverImg = this.info.cover_img
        this.info.anchorName = this.info.anchor_name
        let obj = new Object
        obj[0] = this.info.start_time
        obj[1] = this.info.end_time
        this.getSTime(obj)
      },
      p(s) {
        return s < 10 ? "0" + s : s;
      },
      getSTime(val) {
        const d = new Date(val[0]);
        const resDate =
          d.getFullYear() +
          "-" +
          this.p(d.getMonth() + 1) +
          "-" +
          this.p(d.getDate());
        const resTime =
          this.p(d.getHours()) +
          ":" +
          this.p(d.getMinutes()) +
          ":" +
          this.p(d.getSeconds());
        this.info.startTime = resDate + " " + resTime;
        const c = new Date(val[1]);
        const resDatec =
          c.getFullYear() +
          "-" +
          this.p(c.getMonth() + 1) +
          "-" +
          this.p(c.getDate());
        const resTimec =
          this.p(c.getHours()) +
          ":" +
          this.p(c.getMinutes()) +
          ":" +
          this.p(c.getSeconds());
        this.info.endTime = resDatec + " " + resTimec;
      },

      getAuthorizerInfoData() {
        getAuthorizerInfo("applet").then((response) => {
          this.headImg = response.headImg;
          this.nickName = response.nickName;
        });
      },
      submits() {
        //编辑直播间
        let data = new Object
        data.shareImg = this.imgform.shareImg;
        data.feedsImg = this.imgform.feedsImg;
        data.coverImg = this.imgform.coverImg;
        data.shareImgStr = this.imgform.imageurl;
        data.feedsImgStr = this.imgform.liveurl;
        data.coverImgStr = this.imgform.liveBGurl
        data.anchorName = this.info.anchor_name;
        data.anchorWechat = this.info.anchorWechat;
        data.name = this.info.name;
        data.roomId = this.info.roomid
        debugger
        this.resForm()
        data.startTime = this.info.start_time
        data.endTime = this.info.end_time
        console.log(data, "this.data");
        if (this.imgform.shareImg) {
          if (this.imgform.feedsImg) {
            if (this.imgform.coverImg) {
              addSubjectInfo(data).then((response) => {
                this.$router.push("/activity/broadcast/info");
                this.$message({
                  message: "编辑成功",
                  type: "success",
                });
              });
            } else {
              this.$message.error("直播卡片封面不能为空");
            }
          } else {
            this.$message.error("直播间背景墙不能为空");
          }
        } else {
          this.$message.error("分享卡片封面不能为空");
        }
      },
      submit() {
        //创建直播间
        this.info.shareImgStr = this.imgform.imageurl;
        this.info.feedsImgStr = this.imgform.liveurl;
        this.info.coverImgStr = this.imgform.liveBGurl;
        this.info.shareImg = this.imgform.shareImg;
        this.info.feedsImg = this.imgform.feedsImg;
        this.info.coverImg = this.imgform.coverImg;
        console.log(this.info, "this.info");
        if (this.info.shareImg) {
          if (this.info.feedsImg) {
            if (this.info.coverImg) {
              creatRoom(this.info).then((response) => {
                this.$router.push("/activity/broadcast/info");
                this.$message({
                  message: "创建成功",
                  type: "success",
                });
              });
            } else {
              this.$message.error("直播卡片封面不能为空");
            }
          } else {
            this.$message.error("直播间背景墙不能为空");
          }
        } else {
          this.$message.error("分享卡片封面不能为空");
        }
      },
      returnIndex() {
        this.$emit("update:indexStr", true);
        this.$emit("getData", null);
      },
      cancel() {
        this.$router.push("/activity/broadcast/info");
        this.returnIndex();
      },
      nextStep() {

        //1.获取当前日期
        var date = new Date();
        //2. 获取当前分钟
        var min = date.getMinutes();
        //3. 设置当前时间+10分钟：把当前分钟数+5后的值重新设置为date对象的分钟数
        date.setMinutes(min + 10);
        var compare = this.timeValue[0] > date
        var compareAnyhow = this.timeValue[0] < this.timeValue[1]
        var compareDifference = this.timeValue[1] - this.timeValue[0]
        debugger

        if (compare && compareAnyhow && compareDifference <= 86400000 && compareDifference >= 1800000) {
          if (this.min == true) {
            if (this.mins == true) {
              this.$refs["info"].validate((valid) => {
                if (valid) {
                  this.active = 2;
                }
              });
            } else {
              this.$message.error(
                "主播昵称最短2个汉字，最长15个汉字，1个汉字相当于2个字符"
              );
            }
          } else {
            this.$message.error(
              "直播标题最短3个汉字，最长17个汉字，1个汉字相当于2个字符"
            );
          }
        } else {
          this.$message.error(
            "开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后 开播时间和结束时间间隔不得短于30分钟，不得超过24小时"
          );
        }

      },
      nextStepTwo() {
        this.active = 1;
      },
    },
    //声明周期 - 创建完成（可以访问当前this实例）

    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //声明周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁之后
    activated() {
    }, //缓存keep-alive
  };
</script>

<style lang="scss" scoped>
  .box-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    width: 70%;
    height: 100%;
    margin: auto;
    margin-top: 2%;
    // margin-bottom: 2%;
    background-color: whitesmoke;
  }

  .steps {
    position: relative;
    left: 50%;
    margin-left: -180px;
    margin-top: 20px;
  }

  .activeOne {
    position: relative;
    left: 50%;
    margin-left: -250px;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .activeOneBtn {
    position: relative;
    left: 50%;
    margin-left: -78px;
    padding-bottom: 30px;
  }

  .typeface {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
  }

  .typeface2 {
    color: #c0c4cc;
  }

  .itemImg {
    opacity: 0.9;
    margin-top: 24px;
    margin-bottom: 24px;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #000000;
    padding-left: 8px;
    height: 16px;
    line-height: 16px;
    border-left: 3px solid #6467f0;
    font-weight: bold;
  }

  .configure {
    width: 375px;
    height: 325px;
    padding: 24px 16px;
    background: #f7f7f7;
    display: flex;

    .imgsrc {
      width: 40px;
      height: 40px;
      border-radius: 3px;
      margin-right: 11px;
    }
  }

  .configuretow {
    width: 375px;
    height: 199px;
    padding: 15px;
    background: #f7f7f7;
    display: flex;
  }

  .configureImg {
    background-color: #5b5c7d;
    width: 225px;
    height: 185px;
  }

  .configureImgtow {
    width: 187px;
    height: 175px;
  }

  .configureFoot {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #e7e7eb;
  }

  .headImg {
    float: left;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 6px;
  }

  .headTitle {
    line-height: 15.7px;
    color: #9a9a9a;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  .configuretowLeft {
    border-radius: 9px 0 0 9px;
    background: #5b5c7d;
    height: 175px;
    width: 200px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .configuretowRight {
    border-radius: 0 9px 9px 0;
    background: #fff;
    height: 175px;
    width: 175px;
    position: relative;
    background-size: contain;
  }

  .configuretowLeftImg {
    color: #fff;
    font-size: 12px;
    margin: 9px;
    margin: 9px 0 0 10px;
    position: relative;
    line-height: 1;
    height: 20px;
    line-height: 20px;
    border-radius: 9px;
    display: inline-block;
    padding-right: 9px;
    background: rgba(0, 0, 0, 0.3);
  }

  .configuretowtImg {
    position: relative;
    top: -1px;
    left: -1px;
    content: " ";
    display: inline-block;
    height: 18px;
    width: 18px;
    background: url("../../../../assets/images/refresh.gif") no-repeat center;
    background-size: contain;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: middle;
  }

  .configureThree {
    width: 375px;
    height: 812px;
    position: relative;
    background: linear-gradient(
        to top,
        #1d1f48,
        #2a2c55,
        #42446d,
        #51537c,
        #5c5f85,
        #595c7c
    );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .liveBG {
    width: 375px;
    height: calc(100% + 0px);
    background-size: cover;
    z-index: 2;
    background: url("../../../../assets/images/liveBG.png") no-repeat center;
  }

  .liveBGHead {
    position: relative;
    padding: 1px 3px;
    border-radius: 18px;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 3;
  }

  .liveBGHeadBtn {
    position: relative;
    width: 72px;
    height: 24px;
    border-radius: 12px;
    text-align: center;
    background: linear-gradient(to bottom, #8385f3, #6467f0);
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    margin-left: 10px;
  }

  .bottomBtn {
    width: 100%;
    height: 100%;
    padding: 50px 0 30px 0;

    .buttonOne {
      position: relative;
      left: 50%;
      margin-left: -71px;
    }

    .buttonTwo {
      position: relative;
      left: 50%;
      background-color: #6467f0;
      color: #fff;
      // margin-left: -25px;
    }
  }
</style>
